<!--
 * @Author: ryo
 * @Date: 2021-11-20 23:14:08
 * @LastEditors: ryo
 * @LastEditTime: 2021-11-25 17:36:59
 * @Description: 联系我们组件
 * @FilePath: \site\src\views\contact\Home.vue
-->
<template>
  <div class="contact">
    <!-- 轮播图 -->
    <m-carousel> </m-carousel>
    <!-- 联系我们 -->
    <v-container fluid class="mb-15 mt-10 box">
      <v-row justify="center" align="center">
        <v-col>
          <div class="box_title">
            <div class="h2">联系我们</div>
            <div class="caption">Contact us</div>
          </div>
        </v-col>
      </v-row>

      <v-row
        justify="center"
        align="start"
        class="px-8"
        v-for="contact in contactModel.list"
        :key="contact.id"
      >
        <v-col cols="12" md="6">
          <div class="contact_title">{{ contact.name }}</div>
          <div class="text-body-1 pt-5 text-justify">
            {{ contact.content }}
          </div>
        </v-col>
        <v-col cols="12" md="6">
          <v-list dense>
            <v-list-item v-for="item in contact.list" :key="item.id">
              <v-list-item-icon class="mr-4">
                <!-- <v-icon>{{ item.icon }}</v-icon> -->
                <v-img :src="item.img" width="28" height="28"></v-img>
              </v-list-item-icon>
              <v-list-item-content>
                <v-list-item-title class="text-body-1">
                  {{ item.text }}
                </v-list-item-title>
              </v-list-item-content>
            </v-list-item>
          </v-list>
        </v-col>
      </v-row>
    </v-container>
  </div>
</template>

<script>
// 组件
import mCarousel from '@/components/common/Carousel.vue';
// 数据
import constant from '@/const/';

export default {
  name: 'Contact',
  components: {
    mCarousel
  },
  data() {
    return {
      contactModel: {
        list: constant.contact.contacts
      }
    };
  }
};
</script>

<style lang="scss" scoped>
.contact {
  &_title {
    font-size: 20px;
    font-weight: bold;
    position: relative;
    padding-left: 20px;

    &::before {
      content: '';
      position: absolute;
      top: 5px;
      left: 0;
      width: 6px;
      height: 20px;
      background-color: #ff0000;
    }
  }
}
</style>
